<template>
  <div class="warpper">
    <!-- //顶部 -->
    <header id="header" class="mui-bar mui-bar-transparent">
			<a class="mui-action-back  mui-pull-left">
				<img src="http://static.manmanbuy.com/m/img/mlogo.png" alt="">
			</a>
			<h1 class="mui-title"><input type="text"></h1>
			<span class="download">下载</span>
			
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<div class="mui-scroll">
				<router-link class="mui-control-item1" to="/home" data-wid="tab-top-subpage-1.html">
					首页
				</router-link>
				<router-link class="mui-control-item1" to="/save" data-wid="tab-top-subpage-2.html">
					省钱控
				</router-link>
				<router-link class="mui-control-item1" to="/history_mune" data-wid="tab-top-subpage-3.html">
					查看史价
				</router-link>
				<router-link class="mui-control-item1" to="/compare" data-wid="tab-top-subpage-4.html">
					比价搜索
				</router-link>
				<router-link class="mui-control-item1" to="/discount" data-wid="tab-top-subpage-5.html">
					国内折扣
				</router-link>
				<router-link class="mui-control-item1" to="/baicai" data-wid="tab-top-subpage-5.html">
					白菜价
				</router-link>
				<router-link class="mui-control-item1" to="/hourbang" data-wid="tab-top-subpage-5.html">
					小时风云榜
				</router-link>
			</div>
	</div>
	</header>
	
    <!-- nav部分 -->
		
    <!-- main部分 -->
		<transition mode="out-in">
		 <router-view></router-view>
		</transition>
	
     <!-- <transition>
		    <router-view></router-view>
		 </transition> -->
    <!-- <h1>这是APP组件</h1> -->
    <!-- 底部 -->
		
  
  </div>
</template>
<script>
import mui from "./lib/mui/js/mui.min.js";
export default{
	data() {
		return {
			// value:""
		}
	},
	mounted(){
     mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
	}
}

</script>
<style lang = "less" scope>
* {
  touch-action: pan-y;
}
 .warpper{
    padding-top: 40px;
	 overflow-x: hidden;
	 .mui-bar{
		 background-color: rgba(255, 255, 255, .99);
		 padding: 3px 0;
		 padding-top: 5px;
		 border-bottom: 1px solid #ddd;
		 margin-bottom: 90px;
		 display: flex;
		 align-items: center;
      .mui-title{
		  height: 60%;
		  width: 40%;
		  position: relative;
		  border: 1px solid #ddd;
		  border-radius: 10px;
		  line-height: 0;
		  >input{
			  border: 0;
			  position: absolute;
			  top: -10px;
			  left: 0;
		  }
	  }
		.mui-action-back{
			display: inline-block;
			width: 80.5px;
			height: 24px;
			img{
				height: 100%;
				width: 100%;
			}
        }
		.download{
			border: 1px solid #f04848;
			position: absolute;
			right: 10px;
			top: 13px;
			width: 50px;
			font-size: 14px;
			border-radius: 25px;
			text-align: center;
			color: #f04848;
		}
	 }
	 .mui-scroll-wrapper{
		 position: absolute;
		 left: 0;
		 top: 44px;
		 background-color: #fff;
	 }
	.mui-fullscreen{
		top:59px;
	}  
	.mui-segmented-control.mui-scroll-wrapper .mui-control-item1{
		padding: 0 10px;
	}
	.mui-control-item1{
		line-height: 38px;
	}
	.mui-segmented-control.mui-segmented-control-inverted .mui-control-item1.mui-active{
		border-bottom: 2px solid #f04848;
		color: #f04848;
	}
	.mui-segmented-control.mui-scroll-wrapper{
		height: 40px;
	}
	.mui-segmented-control.mui-segmented-control-inverted .mui-control-item1{
		border-bottom:2px solid #fff;
	}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item1.mui-active {
    background: 0 0;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item1 {
    color: inherit;
    border: 0;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item1 {
    display: inline-block;
    width: auto;
    padding: 0 20px;
    border: 0;
}
	.home_compotent{
		margin-top: 50px;
	}
	.mui-btn-block {
     font-size: 15px;
		 padding: 10px 0;
	}

}
 .v-enter{
	 opacity: 0;
	 transform: translateX(100%);
 }
 .v-leave-to{
	 transform: translateX(-100%);
	 opacity: 0;
	 /* position: absolute; */
 }
 .v-enter-active,
 .v-leave-active{
	 transition: all 0.5s ease-in-out;
 }
</style>